<template>
	<view class="uni_box home">
		<!-- <navbar title='我的答疑' :yin="true">
		</navbar> -->
		<view class="content">
			<Nheader></Nheader>
			<view class="daone">
				<image class="dabg" @click="getdayiClick" :src="dabginfo.image" mode="widthFix" />
			</view>
			
			<view class="wenone">
				<u-input v-model="keywords" type="text" :border="false" placeholder="请输入关键词搜索"/>
				<view class="sou" @click="getList">搜索</view>
			</view>
			<view class="tiwen">
				<view class="wenleft" @click="cateshow=true">
					<text class="qname">{{cateinfo.name}}</text>
					<image class="tixia" src="@/pages_subject/static/img/tixia.png" mode="" />
				</view>
				<view class="wenright" @click="gettiwen">
					<image class="tiwenicon" src="@/pages_subject/static/img/tiwen.png" mode="" />
					<text>我要提问</text>
				</view>
			</view>
			<view class="titwo">
				<u-tabs :list="type" item-width="150" :is-scroll="true" :current="tabcurrent" @change="tabchange" active-color="#E8433A" inactive-color="#999" font-size="25"></u-tabs>
			</view>
			<view class="jian"></view>
			<view class="tilist">
				
				<view class="wentwo">
					<view class="wenitem" v-for="(item,index) in list" :key="index" @click="getDetail(item)">
						<view class="wenzt" :class="item.status==1?'yida':''">
							{{ item.status_text }}
						</view>
						<view class="wennav">
							<text class="wenname">{{ item.title }}</text>
							<view class="wenbot">
								<text class="qian">{{ item.cate_name }}  {{item.level_name}}</text>
								<text class="qian">提问时间：{{item.createtime}}</text>
								<text class="qian">浏览 {{ item.views }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nextpage">
				<view class="nextitem" @click="gethome">首页</view>
				<view class="nextitem" @click="getpage(1)">上一页</view>
				<view class="nextitem" @click="getpage(2)">下一页</view>
			</view>
			<view class="tifix" @click="gettiwen">
				<image class="tiwenicon" src="@/pages_subject/static/img/tiwen.png" mode="" />
				<text>提问</text>
			</view>
			<!-- 底部 -->
			<!-- <view class="dabot">
				<view class="dalfet">
					<image class="fankui" src="@/pages_subject/static/img/fankui.png" mode="" />
					<text class="daname">答疑首页</text>
				</view>
				<view class="dalfet tbtn" @click="gettiwen">
					<image class="fankui" src="@/pages_subject/static/img/bianji.png" mode="" />
					<text class="daname">我要提问</text>
				</view>
			</view> -->
		</view>
		<u-select v-model="cateshow" :list="cate" @confirm="cateconfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:[
					{
						name: '全部'
					}, {
						name: '视频'
					}, {
						name: '题库'
					}
				],
				tabcurrent:0,
				value:'',
				page:1,
				lastpage:1,
				dabginfo:{},
				cate:[],
				cateinfo:{},
				type:[],
				typeinfo:{},
				cateshow:false,
				keywords:'',
				list:[],
				cate_id:''
			}
		},
		onLoad(option) {
			if(option.cate_id){
				this.cate_id = option.cate_id
			}
			this.getdayiBanner();
			
		},
		onShow() {
			this.getdayi();
		},
		methods: {
			async getdayi(){
				let res = await this.$u.api.getQustionData({
					cate_id:this.cate_id
				})
				
				let data = res.cate
				for(let i in data){
					data[i].label = data[i].name
					data[i].value = data[i].id
				}
				this.cate = data
				if(res.cate){
					this.cateinfo = res.cate[0]
				}
				this.type = res.type
				if(res.type){
					this.typeinfo = res.type[0]
				}
				this.getList()
			},
			async getdayiBanner(){
				let res = await this.$u.api.dayigetBanner({
				})
				this.dabginfo = res[0]
			},
			getdayiClick(){
				this.toPage(this.dabginfo)
			},
			tabchange(e){
				this.tabcurrent = e
				this.typeinfo = this.type[e]
				this.getList()
			},
			gettiwen(){
				this.navrouter("/pages_subject/twoPage/MinePage/TiQuestion?type=1"+'&cate_id='+this.cate_id);
			},
			getDetail(item){
				this.navrouter("/pages_subject/twoPage/MinePage/WenDetail?id="+item.id);
			},
			gethome(){
				uni.switchTab({ url: '/pages/tabbar/Tabhome' })
			},
			getpage(e){
			if(e == 1){
					//上一页
					if(this.page == 1){
						this.$u.toast("没有上一页了");
					}else{
						this.page--
						this.getList()
					}
				}else if(e == 2){
					//下一页
					if(this.page == this.lastpage){
						this.$u.toast("没有下一页了");
					}else{
						this.page++
						this.getList()
					}
				}
			},
			cateconfirm(e){
				console.log(e)
				this.cateinfo.id = e[0].value
				this.cateinfo.name = e[0].label
				this.getList()
				// this.wang = e[0].value
			},
			async getList(){
				let res = await this.$u.api.getQustionList({
					cate_id:this.cate_id,
					cid:this.cateinfo.id,
					type_id:this.typeinfo.id,
					keywords:this.keywords,
					page:this.page
				})
				this.lastpage = res.lastpage;
				this.list = res.list;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 130rpx;
		.dabot{
			position: fixed;
			width: 100%;
			height: 120rpx;
			z-index: 100;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			bottom: 0;
			left: 0;
			justify-content: space-between;
			box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(202,205,217,0.14);
			.dalfet{
				width: 47%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F8F8F8;
				border-radius: 40rpx;
				height: 80rpx;
				text{
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
				}
				.fankui{
					width: 24rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}
			.tbtn{
				background: linear-gradient(-90deg, #4483F6, #71BEFF);
				text{
					color: #fff;
				}
			}
		}
		.daone{
			.dabg{
				width: 100%;
				height: 240rpx;
			}
		}
		.tione{
			background: #FF8B50;
			height: 136rpx;
			position: relative;
			.tiview{
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.tione{
					width: 33%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.tiname{
						font-family: DIN;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.miao{
						font-weight: 400;
						font-size: 22rpx;
						color: #FFE5D8;
						display: block;
						margin-top: 10rpx;
					}
				}
				.xian{
					display: inline-block;
					width: 1rpx;
					height: 40rpx;
					background: #FFB38D;
				}
			}
		}
		.titwo{
			padding: 20rpx 0 0;
		}
		.jian{
			height: 30rpx;
			background: #F6F7FB;
		}
		.souview{
			.souitem{
				background: #FFFFFF;
				box-shadow: 0px 0px 40px 0px rgba(202,205,217,0.4);
				border-radius: 36px;
				padding: 6rpx 6rpx 6rpx 30rpx;

			}
		}
		.wenone{
			background: #FFFFFF;
			box-shadow: 0px 0px 40px 0px rgba(202,205,217,0.4);
			border-radius: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			// padding: 8rpx;
			height: 80rpx;
			margin: -40rpx 30rpx 30rpx;
			position: relative;
			padding: 20rpx 10rpx 20rpx 30rpx;
			/deep/.u-input{
				margin-right: 20rpx;
			}
			.sou{
				margin-left: auto;
				height: 64rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 32rpx;
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
		
		.tiwen{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding:0 30rpx;
			.wenleft{
				border-radius: 10rpx;
				border: 1rpx solid #EEEEEE;
				padding: 20rpx;
				min-width: 260rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.tixia{
				margin-left: auto;
				width: 24rpx;
				height: 13rpx;
			}
			.wenright{
				margin-left: auto;
				width: 230rpx;
				height: 80rpx;
				background: linear-gradient(-90deg, #4483F6, #71BEFF);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.tiwenicon{
					margin-right: 11rpx;
					width: 24rpx;
					height: 24rpx;
				}
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
		.tilist{
			padding: 40rpx 30rpx;
			
			.wentwo{
				.wenitem{
					border-bottom: 1rpx solid #eee;
					padding: 30rpx 0;
					display: flex;
					flex-direction: row;
					.wenzt{
						padding: 10rpx 14rpx;
						height: 72rpx;
						background: #FEF6F2;
						border-radius: 4rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #FA7938;
						line-height: 30rpx;
						margin-right: 20rpx;
					}
					.yida{
						background: #F1F7F3;
						color: rgba(70, 197, 100, 1);
					}
					.wennav{
						display: flex;
						flex-direction: column;
						flex: 1;
						.wenname{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #111111;
							display: block;
							// margin-bottom: 0rpx;
						}
						.wenbot{
							margin-top: 32rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							.qian{
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #999999;
							}
						}
					}

				}
			}
		}
		// padding-bottom: 150rpx;
	}
	.nextpage{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		.nextitem{
			padding: 14rpx 40rpx;
			// height: 52rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			margin: 0 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.tifix{
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(147deg, #4483F6, #71BEFF);
		box-shadow: 0rpx 10rpx 26rpx 0rpx rgba(68,131,246,0.34);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 30rpx;
		bottom: 10%;
		z-index: 100;
		.tiwenicon{
			width: 24rpx;
			height: 24rpx;
			margin-bottom: 8rpx;
		}
		text{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #FFFFFF;
		}
	}
</style>
